<template>
  <el-card class="card-view" :style="{
    backgroundColor: randomColor(),
  }">
    <div>
      <el-row>
        <el-col :span="14">
          <el-card class="card-view">
            <div class="echarts-container" id="echart1" style="width:850px;height: 442px;"></div>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card class="card-view">
            <div class="echarts-container" id="echart2" style="width:650px;height: 200px;"></div>
          </el-card>
          <el-card class="card-view">
            <div class="echarts-container" id="echart3" style="width:650px;height: 200px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import { request } from '@/api/service'
export default {
  sort: 6,
  title: '头部展示图',
  name: 'chartHeader',
  icon: 'el-icon-s-data',
  description: '按年度统计',
  height: 28,
  width: 20,
  isResizable: true,
  props: {
    industry: String,
    /*data: {
      type: Object,
      require: true
    }*/
  },
  data() {
    return {
      data: {},
      type_: null,
      status_: null,
      area: null,
      radio: '7',
      total: {},
      regions: [],
      selectedRegion: '厦门市'
    }
  },

  mounted() {
    console.log(123)
    this.initGet()
  },
  watch: {
    type_() {
      this.$nextTick(() => {
        this.initECharts1('最新数据');
      })
    },
    status_() {
      this.$nextTick(() => {
        this.initECharts2('办理状态');
      })
    },
    area() {
      this.$nextTick(() => {
        this.initECharts3('各区数量');
      })
    }
  },
  methods: {
    initGet() {
      request({
        url: '/api/risk/complaints_pre/type/'
      }).then((res) => {
        this.type_ = res.data
      })
      request({
        url: '/api/risk/complaints_pre/status/'
      }).then((res) => {
        this.status_ = res.data
      })
      request({
        url: '/api/risk/complaints_pre/area/'
      }).then((res) => {
        this.area = res.data
      })
    },
    // 生成一个随机整数
    randomColor() {
      const color = ['#fffff']
      const ran = Math.floor(Math.random() * 4)
      return color[ran]
    },
    /*
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      //const xAxisData = this.data.map(item => item.day)
      //const seriesData = this.data.map(item => item.count)\

      console.log('this.selected', this.selectedRegion)
      const yearsData = this.data[this.selectedRegion] // Object
      var xData = []
      var yData = []
      for (var key in yearsData) {
        xData.push(key)
        yData.push(yearsData[key])
      }

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: yData
          }
        ]
      };

      this.myChart.setOption(option)
    },*/
    initECharts1(title) {
      const mychart1 = this.$echarts.init(document.getElementById('echart1'))
      const option1 = {
        title: {
          text: title
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: this.type_.month
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '案件数量',
            min: 0,
            max: 3000,
            axisLabel: {
              formatter: '{value} 件'
            }
          },
        ],
        dataZoom: [
          {
            show: true,
            start: '2020-01',
            end: '2023-10'
          },
          {
            type: 'inside',
            start: '2020-01',
            end: '2023-10'
          },
          {
            show: true,
            yAxisIndex:0,
            filterMode: 'empty',
            width: 30,
            height: '80%',
            showDataShadow: false,
            left: '93%'
          }
        ],
        series: [
          {
            name: '举报数量',
            type: 'line',
            data: this.type_.jb
          },
          {
            name: '投诉数量',
            type: 'line',
            data: this.type_.ts
          },
          {
            name: '案件总量',
            type: 'bar',
            smooth: true,
            data: this.type_.total
          }
        ]
      };
      mychart1.setOption(option1);
    },
    initECharts2(title) {
      const echart2 = this.$echarts.init(document.getElementById('echart2'))
      var options = []
      for (let index = 0; index < this.status_.series.length; index++) {
        const tmp = {
          title: { text: title },
          series: [this.status_.series[index]]
        }
        console.log(tmp)
        tmp.series[0].data[3]["itemStyle"] = {
          // stop the chart from rendering this piece
          color: 'none',
          decal: {
            symbol: 'none'
          }
        }
        tmp.series[0].data[3]["label"]
          = {
          show: false
        }
        options.push(tmp)
      }

      const option2 = {
        baseOption: {
          timeline: {
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 2000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: this.status_["year"],
            label: {
              formatter: function (s) {
                return new Date(s).getFullYear();
              }
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            // doesn't perfectly work with our tricks, disable it
            selectedMode: false
          },
          series: [
            {
              name: '案件数量',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '70%'],
              // adjust the start angle
              startAngle: 180,
              label: {
                show: true,
                formatter(param) {
                  // correct the percentage
                  return param.name + ' (' + param.percent * 2 + '%)';
                }
              }
            }
          ]
        },
        options: options
        // 其他 ECharts 配置项...
      };
      echart2.setOption(option2);
    },
    initECharts3(title) {
      const echart3 = this.$echarts.init(document.getElementById('echart3'))
      var options = []
      for (let index = 0; index < this.area.series.length; index++) {
        const tmp = {
          title: { text: title },
          series: [this.area.series[index]]
        }
        console.log(tmp)
        options.push(tmp)
      }

      const option3 = {
        baseOption: {
          timeline: {
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 2000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: this.area["year"],
            label: {
              formatter: function (s) {
                return new Date(s).getFullYear();
              }
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right'
          },
          series: [
            {
              name: '案件数量',
              type: 'pie',
              radius: '50%',
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        options:options
      };
      echart3.setOption(option3);
    }
  }
}
</script>

<style scoped lang="scss">
.card-view {
  //border-radius: 10px;
  color: $color-primary;
}

.el-card {
  height: 70%;
}

::v-deep .el-card__body {
  width: 100%;
  height: 100%;
}

.el-radio-button__inner {
  border-radius: 20px;
}
</style>
